import * as React from "react"
import {CircleToggleButton} from "../../common/button/CircleToggleButton"
import classNames from 'classnames'
import {CircleToggleLabel} from "../../common/label/CircleToggleLabel"


export class NodeWidgetEditor extends React.Component {

    onRemove () {
        const { node, diagramEngine } = this.props
        node.remove()
        diagramEngine.forceUpdate()
    }

    render (){
        const {node, hideClassName } = this.props
        const nodeId = (typeof node.getID === 'function' ? node.getID() : "")
        const btnId = "node-close-button" + nodeId

        return (
                [
                    <div className={classNames("node-editor-button remove", hideClassName )} key="node-close-button">
                        <CircleToggleButton
                            id={btnId + "-remove"}
                            buttonIcon="fa fa-close"
                            tooltip="Remove"
                            onClick={this.onRemove.bind(this)}
                            className="remove-button"
                            size="small"
                        />
                    </div>,

                    <div className={classNames("flowPort", "node-editor-button link",hideClassName )}
                         key="node-link-button"
                         data-name="flowPort"
                    >
                        <CircleToggleLabel
                            id={btnId + "-link"}
                            buttonIcon="fa fa-arrow-right"
                            tooltip="Connect"
                            className="link-button"
                        />
                    </div>,
                ]
        )
    }
}
